import React from 'react';
import { Button, Icon, Modal } from 'antd';
import UploadPublic from '../UploadPublic';

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

const FileUploadPublic = React.forwardRef(
    (
        {
            value = {},
            onChange,
            categoryCode = 'workflowFile',
            checkFileSize = 50,
            checkFileSizeMsg = '文件大小不能超过50MB！',
            checkFileType = 'JPG,JPEG,BMP,GIF,PNG,DOC,DOCX,ppt,pptx,PDF,xls,xlsx,RAR,ZIP,txt,ai',
            checkFileTypeMsg = '只能上传JPG,JPEG,BMP,GIF,PNG,DOC,DOCX,ppt,pptx,PDF,xls,xlsx,RAR,ZIP,txt,ai格式的文件！',
            isSingle = false,
            ...rest
        },
        ref
    ) => {
        const [previewVisible, setPreviewVisible] = React.useState(false);
        const [previewImage, setPreviewImage] = React.useState('');
        const { allFileList = [] } = value;

        const handleFileChange = fileList => {
            onChange({
                allFileList: fileList,
                uploadResourceFile: fileList.map(f => f.url)
            });
        };

        const handleImgPreview = async file => {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            setPreviewImage(file.url || file.preview);
            setPreviewVisible(true);
        };

        const uploadButton = (
            <div>
                <Icon type="plus" style={{ fontSize: 24, color: 'rgba(0, 0, 0, 0.45)' }} />
                <div>上传照片</div>
            </div>
        );

        // 三元表达式修改
        const fetchSingle = single => {
            if (single) {
                return allFileList.length >= 1 ? null : uploadButton;
            }
            return (
                <Button type="primary" ghost>
                    <Icon type="upload" />
                    上传文件
                </Button>
            );
        };

        return (
            <>
                <UploadPublic
                    draggable={false}
                    ref={ref}
                    listType={isSingle ? 'picture-card' : 'text'}
                    checkFileSize={checkFileSize}
                    onPreview={isSingle && handleImgPreview}
                    checkFileType={checkFileType}
                    sysCode="OA"
                    businessCode="SysRule"
                    categoryCode={categoryCode}
                    fileList={allFileList || []}
                    checkFileTypeMsg={checkFileTypeMsg}
                    checkFileSizeMsg={checkFileSizeMsg}
                    onChange={handleFileChange}
                    {...rest}
                >
                    {rest.children ? rest.children : fetchSingle(isSingle)}
                </UploadPublic>
                <Modal visible={previewVisible} footer={null} onCancel={() => setPreviewVisible(false)}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </>
        );
    }
);

export default FileUploadPublic;
